<template>
	<view class="video-list">
		<view 
			class="video-item" 
			v-for="(item, index) in videoList" 
			:key="item.id"
		>
			<view class="video-info" @click="tovideo(item.videoId)">
				<!-- 图片和标题放在左右布局 -->
				<view class="image-container">
					<image :src="getImgUrl(item.imgId)"></image>
				</view>
				<view class="text-container">
					<view class="video-title">{{item.title}}</view>
					<view class="video-meta">
						<text class="time">{{item.createTime}}</text>
					</view>
				</view>
			</view>
			<!-- 原来的视频播放组件部分被注释掉 -->
			<!-- <video
				:id="'video_' + index"
				:src="getVideoUrl(item.videoId)"
				class="video-player"
				:controls="true"
				:show-fullscreen-btn="true"
				:show-play-btn="true"
				:enable-progress-gesture="true"
				:direction="90"
				:poster="getImgUrl(item.imgId)"
				:custom-cache="false"
			></video> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			baseUrl: 'http://shuzisan.suguang.cc:8188/image',
			//baseUrl: 'http://127.0.0.1:8188/image',
			videoList: []
		}
	},
	onShow() {
		this.getVideoList()
	},
	methods: {
		// 获取视频列表
		getVideoList() {
			this.$myRequest({
				url: '/videoSorting/getVideoSortingList',
				method: 'GET',
			}).then((res) => {
					if(res.code === 200 && res.flag) {
						this.videoList = res.data
					} else {
						uni.showToast({
							title: '获取视频列表失败',
							icon: 'none'
						})
					}
				})
		},
		tovideo(videoId){
			uni.navigateTo({
				url: `/pages/video/video?videoId=${videoId}`
			});
		},
		// 获取视频URL
		getVideoUrl(videoId) {
			// 根据实际接口返回完整的视频URL
			return `${this.baseUrl}/getVideoById/${videoId}`
		},
		// 获取图片URL
		getImgUrl(imgId) {
			// 根据实际接口返回完整的图片URL
			return `${this.baseUrl}/getImageById/${imgId}`
		},
		videoErrorCallback(e) {
			console.error('视频播放错误：', e)
			uni.showToast({
				title: '视频播放出错',
				icon: 'none'
			})
		}
	}
}
</script>

<style>
.video-list {
	padding: 20rpx;
	background-color: #f8f8f8;
}

.video-item {
	margin-bottom: 30rpx;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.video-info {
	padding: 20rpx;
	display: flex; /* 设置为flex布局 */
	align-items: center; /* 垂直居中 */
}

.image-container {
	width: 320rpx; /* 控制图片的宽度 */
	height: 220rpx; /* 控制图片的高度 */
	margin-right: 20rpx; /* 图片与文本之间的间距 */
}

.image-container image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 保持图片比例，同时裁剪 */
	border-radius: 8rpx;
}

.text-container {
	flex: 1; /* 占据剩余空间 */
}

.video-title {
	font-size: 32rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 12rpx;
	font-weight: 500;
}

.video-meta {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.time {
	font-size: 24rpx;
	color: #999;
}

.video-player {
	width: 100%;
	height: 420rpx;
}
</style>
